<template>
  <div class="login">
    <Navbar>
      <div slot="center">用户注册</div>
    </Navbar>

    <!-- 表单 -->
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model.trim="name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model.trim="username"
          name="username"
          label="账号"
          placeholder="请输入账号"
          class="username"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model.trim="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 跳转到登录页面 -->
    <router-link class="register_now" to="/login">拥有账号直接登录</router-link>
  </div>
</template>

<script>
import Navbar from "../../components/navbar/NavBar"
import {reqRegister} from '../../api/login'
export default {
  name: "",
  data() {
    return {
      name: "",
      username: "",
      password: ""
    };
  },
  methods: {
    async onSubmit(values) {
      const result = await reqRegister(values)
        console.log(result);
      if(result.code === 200){
        const registerInfo = result
        this.$toast(result.msg)
        this.$router.replace('/profile')
        this.$store.dispatch('save_user', registerInfo)
      }else{
        this.$toast(result.msg)
      }
    }
  },
  components: {
    Navbar
  }
};
</script>
<style lang="less" scoped>
.login {
  height: 100vh;
  background-color: #eee;
  .form {
    padding: 60px 10px;
    .username{
      margin-top: 10px;
    }
    .van-button--default {
      color: #fff;
      background-color: #02a774;
      border: 1px solid #ebedf0;
    }
  }
  .register_now{
    display: block;
    text-align: center;
    font-size: 13px;
    color: red;
    font-weight: bolder;
  }
}
</style>
